簡介:SVG 是 HTML5 中矢量圖的標記語言,它保持了強大的繪圖能力的同時,具有非常高端的使用接口,通過直接操作 Dom 節(jié)點的形式來操作圖形。本課程意在讓學生掌握 SVG 這門語言和它對應(yīng)的一些 API,再結(jié)合2D繪圖的知識,讓學生具有對頁面復(fù)雜圖形的渲染和控制能力。
第1章 SVG 入門
介紹 SVG 的技術(shù)背景,介紹 SVG 的使用方法、基本圖形、基本屬性以及基本編程接口,讓觀眾對 SVG 有一個大概的了解,并且通過一個綜合的例子「SVG 編輯器」將本章知識點串聯(lián)起來。
第2章 SVG 中的坐標系統(tǒng)
讓學生理解 SVG 中的坐標系統(tǒng)的概念。分別講述視窗和視野的概念、使用 <g> 標簽進行圖形分組、以及坐標系和坐標變換的概念及應(yīng)用。
第3章 顏色、漸變和筆刷
講述在 SVG 中如何使用顏色、漸變以及筆刷進行豐富的填充和描邊。
第4章 Path 高級教程
講述使用 Path 進行任意圖形繪制的命令格式,介紹貝塞爾曲線的概念。然后簡單介紹如何把任意 Path 轉(zhuǎn)換成貝塞爾曲線之后制作圖形補間。
第5章 SVG 文本
介紹 SVG 中文本的使用、定位,路徑文本的使用。順便介紹在 SVG 中使用超鏈接的方法。
第6章 圖形引用、裁切和蒙版
介紹在 SVG 中如何引用其它圖形作為替身,如何用裁剪和蒙版做出更高級的圖形效果。
第7章 SVG 動畫
介紹一下動畫的基本概念,以及在 SVG 中創(chuàng)建動畫的兩種方式。使用一個引人入勝的例子來介紹。